<template>
  <view class="wrap">
    <view id='rankImage' class="rankImage">
      <image :src="rankingImage" mode="widthFix" class="img"></image>
    </view>
    <view class="box">
      <view id='nav'>
        <uv-navbar leftText="" :fixed="false" title="" leftIconColor='#FFF' bgColor='rgba(0,0,0,0)' safeAreaInsetTop placeholder autoBack></uv-navbar>
      </view>
      <view class="hd pagePd30" :style="`padding-top: ${top}px`" v-if="pageShow">每周一凌晨1点更新榜单</view>
      <view style="width: 100%;height: 76rpx;"></view>
    </view>
    <template v-if="pageShow">
      <view class="case">
        <view class="rankList">
          <scroll-view scroll-y="true" :style="`height: ${height}px`">
            <view class="list">
              <view class="my" v-for="(item,index) in list" :key="index" @click="tapClick({id: item.association_id})">
                <view class="left">
                  <view class="num">
                    <view class="img" v-if="index < 3">
                      <image src="../../static/one.png" class="img" v-if="index == 0"></image>
                      <image src="../../static/two.png" class="img" v-if="index == 1"></image>
                      <image src="../../static/three.png" class="img" v-if="index == 2"></image>
                    </view>
                    <template v-else>{{ index + 1 }}</template>
                  </view>
                  <avatar :src='setUrl(item.logo_image)' styles='width: 60rpx;height: 60rpx;'></avatar>
                  <view class="name">{{ item.association_name }}</view>
                </view>
                <view class="right"><uv-icon name='arrow-right'></uv-icon></view>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </template>
  </view>
</template>

<script setup>
import rankingImage from '@/static/brisk.png';
import { onLoad } from '@dcloudio/uni-app';
import { ref, getCurrentInstance } from 'vue';
import { post } from '@/api';
import { setUrl } from '@/common';

const { ctx } = getCurrentInstance();
let id = '';
let top = ref(0);
let height = ref(0);
let pageShow = ref(false);
let list = ref([]);

onLoad((option) => {
  id = option.id;
  getData();
})

function getData(){
  const params = {
    limit: 50,
    show_status: 2,
  }
  post('api/association/getAssociationScoreRanking', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      list.value = data;
      getImageInfo()
    }
  })
}
function getImageInfo(){
  ctx.$uv.getRect('#rankImage').then(res => {
    const h = res.height;
    ctx.$uv.getRect('#nav').then(nv => {
      top.value = (h - nv.height) / 2 - 30;
      pageShow.value = true;
      const sys = uni.$uv.sys();
      const win = sys.windowHeight;
      setTimeout(() => {
        ctx.$uv.getRect('.box').then(bs=>{
          height.value = win - bs.height - 50;
        })
      }, 200)
    })
  })
}
function tapClick(row){
  if(row.is_expire){
    msg.value = '该社群已到期，请联系管理员';
    modal.value.open();
    return;
  }
  const url = row.apply_status == 2 ? '/pages/group/yes-detail' : '/pages/group/not-detail'
  uni.navigateTo({
    url: `${url}?id=${row.id}`
  });
}
</script>

<style lang="scss" scoped>
  .case{
    padding: 0 30rpx;
    position: relative;
    z-index: 2;
    .rankList{
      width: 100%;
      background-color: #fff;
      border-radius: 24rpx;
      position: relative;
      min-height: 300rpx;
      .my{
        width: 100%;
        padding: 30rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left{
          display: flex;
          align-items: center;
          .img{
            width: 40rpx;
            height: 40rpx;
            font-size: 0;
          }
          .name{
            font-weight: 500;
            font-size: 28rpx;
            color: #2B2B2B;
            padding-left: 20rpx;
          }
          .num{
            width: 88rpx;
            font-weight: 500;
            font-size: 28rpx;
            color: #737373;
          }
        }
        .right{
          font-weight: 400;
          font-size: 28rpx;
          color: #2B2B2B;
          text-align: right;
        }
      }
    }
  }
  .box{
    position: relative;
    z-index: 2;
    .pagePd30{
      padding: 0 30rpx;
    }
    .hd{
      font-weight: 400;
      font-size: 28rpx;
      color: #FFFAEB;
    }
  }
  .rankImage{
    width: 100%;
    font-size: 0;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
  }
  .wrap{
    width: 100%;
    min-height: 100vh;
    background-color: #FF3935;
  }
</style>